﻿@page
@{ Layout = "_Layout"; }
@section Styles{
<style>
  .el-main {
    padding: 5px 5px 20px 5px;
    overflow: hidden;
  }
  #commands .el-button {
    margin-bottom: 5px;
  }
  #commands .el-button + .el-button {
    margin-left: 0;
  }

  .table-expand-form .el-form-item__label {
    width: 120px;
    color: #909399;
  }
  .table-expand-form .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
}

<el-container>
  <el-main>
    <el-row>
      <el-col :span="20">
        <el-form v-on:submit.native.prevent ref="searchForm" :model="searchForm" :inline="true" size="small" label-width="100px">
          <el-form-item label="栏目" prop="channelIds" :rules="{ required: true, message: '请选择栏目' }">
            <el-cascader
                ref="channelIds"
                v-model="searchForm.channelIds"
                :options="[root]"
                :props="{ multiple: true, checkStrictly: true }"
                filterable
                placeholder="请选择栏目"
              >
                <span slot-scope="{ node, data }">
                  {{ node.label }}
                </span>
              </el-cascader>
          </el-form-item>
          <el-form-item>
            <el-checkbox
              v-model="searchForm.isAllContents"
              label="包含子栏目"
            ></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-popover placement="top" width="580" trigger="click">
              <el-form v-on:submit.native.prevent size="mini" :model="searchForm" style="margin-top: 10px" label-width="80px">
                <el-form-item label="内容属性">
                  <el-checkbox
                    label="置顶"
                    v-model="searchForm.isTop"
                  ></el-checkbox>
                  <el-checkbox
                    label="推荐"
                    v-model="searchForm.isRecommend"
                  ></el-checkbox>
                  <el-checkbox
                    label="热点"
                    v-model="searchForm.isHot"
                  ></el-checkbox>
                  <el-checkbox
                    label="醒目"
                    v-model="searchForm.isColor"
                  ></el-checkbox>
                </el-form-item>
                <el-form-item
                  label="内容分组"
                  v-if="groupNames && groupNames.length > 0"
                >
                  <el-checkbox-group v-model="searchForm.groupNames">
                    <el-checkbox
                      v-for="groupName in groupNames"
                      v-key="groupName"
                      :label="groupName"
                      >{{ groupName }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item
                  label="内容标签"
                  v-if="tagNames && tagNames.length > 0"
                >
                  <el-select
                    ref="tagNames"
                    v-model="searchForm.tagNames"
                    multiple
                    filterable
                    default-first-option
                    style="width: 100%"
                    placeholder="请选择内容标签"
                  >
                    <el-option
                      v-for="tagName in tagNames"
                      :key="tagName"
                      :label="tagName"
                      :value="tagName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div
                slot="reference"
                class="el-dropdown"
                style="float: right; margin-right: 10px"
              >
                <el-badge v-if="isFiltered" is-dot class="item">
                  <span style="cursor: pointer">
                    筛选<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </el-badge>
                <span v-else style="cursor: pointer">
                  筛选<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              </div>
            </el-popover>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" align="right">
        <el-form v-on:submit.native.prevent :inline="true" size="small" label-width="100px">
          <el-form-item>
            <el-popover
              id="sortColumns"
              placement="top"
              width="360"
              trigger="click"
            >
              <div>设置显示列</div>
              <el-table
                :data="columns"
                size="mini"
                style="
                  width: 100%;
                  overflow: auto;
                  max-height: 500px !important;
                "
              >
                <el-table-column prop="displayName"></el-table-column>
                <el-table-column prop="attributeName"></el-table-column>
                <el-table-column align="right" width="80">
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.isList"
                      :disabled="scope.row.attributeName === 'Title'"
                      v-on:change="handleColumnsChange"
                      size="mini"
                    >
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
              <div slot="reference" class="el-dropdown" style="float: right">
                <span style="cursor: pointer">
                  显示列<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              </div>
            </el-popover>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form v-on:submit.native.prevent :inline="true" size="small" label-width="100px">
          <el-form-item label="审核状态">
            <el-checkbox-group v-model="searchForm.checkedLevels">
              <el-checkbox
                v-for="level in checkedLevels"
                v-key="level.label"
                :label="level.label"
                >{{ level.text }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form v-on:submit.native.prevent :inline="true" size="small" label-width="100px">
          <el-form-item label="添加日期">
            <el-col :span="11">
              <el-date-picker
                type="datetime"
                placeholder="选择开始时间"
                v-model="searchForm.startDate"
                value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" align="center">-</el-col>
            <el-col :span="11">
              <el-date-picker
                type="datetime"
                placeholder="选择结束时间"
                v-model="searchForm.endDate"
                value-format="yyyy-MM-ddTHH:mm:ss.000Z"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form v-on:submit.native.prevent size="small" label-width="100px">
          <el-form-item
            v-for="column in searchColumns"
            :key="column.attributeName"
            :label="column.displayName"
          >
            <el-input v-model="column.value" placeholder="请输入搜索关键词">
              <el-button
                slot="append"
                v-on:click="btnSelectColumnClick(column)"
                icon="el-icon-remove-outline"
              ></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <el-form v-on:submit.native.prevent size="small" label-width="100px">
          <el-form-item>
            <el-popover placement="top" width="400" trigger="click">
              <div>
                <el-tag
                  v-for="column in columns"
                  v-if="column.isSearchable"
                  :key="column.attributeName"
                  type="primary"
                  style="cursor: pointer; margin: 0 3px 6px 0"
                  v-on:click="btnSelectColumnClick(column)"
                  :effect="getColumnEffect(column)"
                >
                  {{ column.displayName + "(" + column.attributeName + ")" }}
                </el-tag>
              </div>
              <el-button
                slot="reference"
                size="mini"
                icon="el-icon-circle-plus-outline"
              >
                添加搜索项
              </el-button>
            </el-popover>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <div style="height: 10px"></div>

    <el-divider></el-divider>
    <el-row align="center" style="margin-right: 5px; margin-top: 10px">
      <el-col :span="24" align="center">
        <el-button size="small" type="primary" v-on:click="btnSearchClick">搜 索</el-button>
      </el-col>
    </el-row>
  </el-main>
</el-container>

<el-container v-if="pageContents">
  <el-main>
    <el-divider></el-divider>
    <div style="height: 10px"></div>

    <el-row id="commands">
      <el-col :span="24">
        <el-button
          size="mini"
          icon="el-icon-circle-check"
          :disabled="total === 0 || !isContentChecked"
          v-on:click="btnLayerClick({title: '批量审核', name: 'Check', full: true, withContents: true})"
        >
          审核
        </el-button>
        <el-button
          size="mini"
          icon="el-icon-delete"
          :disabled="total === 0 || !isContentChecked"
          v-on:click="btnLayerClick({title: '批量删除', name: 'Delete', full: true, withContents: true})"
        >
          删除
        </el-button>
      </el-col>
    </el-row>

    <div style="height: 10px"></div>

    @await Html.PartialAsync("_PartialContents")

    <el-row style="margin-top: 7px;">
      <el-col :span="24" align="center">
        <el-pagination
        size="mini"
        background
        v-on:current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      </el-col>
    </el-row>
  </el-main>
</el-container>

@section Scripts{
<script
  src="/sitefiles/assets/js/admin/cms/contentsCheck.js"
  type="text/javascript"
></script>
}
